
.group_item {
    position: relative;
    display: flex;
    align-items: center;

    width: 250px;
    height: 100px;
    padding: 6px 8px;
    border: 1px solid;
}
.group_item:hover {
    background-color: rgba(45, 45, 45, 1);
}
.group_info {
    display: grid;
    grid-template-areas: 
                    'gname'
                    'gnum'
                    'gintro'
                    ;
    grid-template-rows: 28px 20px 20px;
    width: 170px;
    height: 90px;
    padding-left: 10px;
}
.group_info_avator {
    cursor: pointer;
    user-select: none;
}
.group_info_name,
.group_info_people_num,
.group_info_intro {
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.group_info_name {
    grid-area: gname;
    font-size: 18px;
}
.group_info_people_num,
.group_info_intro {
    font-size: 12px;
}
.group_info_people_num {
    grid-area: gnum;
}
.group_info_intro {
    grid-area: gintro;
}
.join_btn {
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 12px;
    padding: 0 4px;
    height: 24px;
    background-color: rgb(24 144 255 / 50%);
    border: none;
}

